<template>
  <div class="api-details">
    <div class="header">
      <div class="left">
        <div class="title">{{ props.apiModels.proName }}-全部接口{{ state.apiArr.length }}个</div>
        <el-input
          v-model="state.apiName"
          clearable
          placeholder="请输入关键字搜索"
          autocomplete="off"
          style="width: 300px"
        >
          <template #suffix>
            <el-icon @click="getApiListData">
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <div class="right">
        <el-button type="info" @click="handleGoBack">
          <el-icon class="el-icon--left">
            <Back />
          </el-icon>
          返回
        </el-button>
        <el-button type="primary" @click="handleAddApi(null)">
          <el-icon class="el-icon--left">
            <Plus />
          </el-icon>
          新增
        </el-button>
        <!-- <el-button type="danger">
          <el-icon class="el-icon--left">
            <Delete />
          </el-icon>
          批量删除
        </el-button> -->
      </div>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item, index) in state.apiArr"
        :key="index"
        @click="handleAddApi(item, true)"
      >
        <div class="item-header">
          <div class="title">
            <span>{{ item.title }}</span>
            <div :class="['select', item.checked ? 'active' : '']"></div>
            <el-checkbox v-model="item.checked" @change="changecheck(index)" />
          </div>
          <div class="user-info">
            <div class="creator">创建者: {{ item.creator ? '超级管理员' : '--' }}</div>
            <div class="create-time">时间: {{ renderTime(item.createTime) }}</div>
          </div>
        </div>
        <div class="item-main">
          <div class="tag">接口名称：{{ item.apiName }}</div>

          <div class="address">地址：{{ item.apiAddress }}</div>
          <div class="explain">说明：{{ item.apiDescript }}</div>
        </div>
        <div class="item-icon">
          <el-icon class="edit" @click.stop="handleAddApi(item)">
            <EditPen />
          </el-icon>
          <el-icon class="delete" @click.stop="handleDeleteApi(item, index)">
            <Delete />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
  <!-- 添加api -->
  <AddApi
    ref="apiRef"
    :showDialog="showDialog"
    @saveFormData="handleSaveProject"
    @colseLog="handleCloseDialog"
  />
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import AddApi from './addApi.vue'
import { renderTime } from '@/utils/index'
import { getApiList, addApi, deleteApi, modifyApi } from '@/services/modules/external-service'
import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  apiModels: {
    type: Object,
    default: () => {}
  }
})

onMounted(() => {
  getApiListData()
})
// 添加api的ref
const apiRef = ref(null)
const state = reactive({
  apiArr: [],
  apiName: '',
  propsArr: []
})
const showDialog = ref(false)
const emit = defineEmits(['closeDiglog'])
/**
 * 返回
 */
const handleGoBack = () => {
  emit('closeDiglog')
}
//删除api
function handleDeleteApi(item) {
  ElMessageBox.confirm(`是否删除`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteApi({ id: item.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          getApiListData()
        }
      })
    })
    .catch(() => {})
}
//新增,或修改api,flag为true则查看api
function handleAddApi(val, flag) {
  apiRef.value.apiDetails(val, flag)
  showDialog.value = true
}
//close
function handleCloseDialog() {
  showDialog.value = false
}
//save
function handleSaveProject(data) {
  if (data.id) {
    modifyApi({ ...data }).then((res) => {
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '修改成功'
        })
        getApiListData()
      }
    })
  } else {
    addApi({ ...data, proId: props.apiModels.id }).then((res) => {
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '添加成功'
        })
        getApiListData()
      }
    })
  }
}
//获取服务接口列表
function getApiListData() {
  getApiList({ proId: props.apiModels.id, apiName: state.apiName }).then((res) => {
    if (res.code === 200) {
      state.apiArr = res.data
    }
  })
}
</script>

<style lang="less" scoped>
.api-details {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 18%);

    .left {
      display: flex;
      align-items: center;

      .title {
        margin-right: 20px;
        font-weight: 700;
      }
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    align-content: flex-start;
    padding: 10px 0;
    height: calc(100% - 50px);
    overflow-y: auto;

    .item {
      position: relative;
      margin-top: 10px;
      border-radius: 5px;
      width: 24%;
      height: 180px;
      overflow: hidden;
      box-shadow: 0px 0 8px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      margin-right: 12px;
      transition: all 0.2s ease;

      &:hover {
        box-shadow: 0px 0 10px rgba(0, 0, 0, 0.4);
      }

      .item-header {
        height: 60px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin: 0 10px;
        box-sizing: border-box;

        .title {
          font-weight: 700;
          line-height: 40px;
        }

        .select {
          position: absolute;
          width: 60px;
          height: 60px;
          transform: rotate(45deg);
          right: -30px;
          top: -30px;
          background: #448cf3;

          &.active {
            background: #00c21b;
          }
        }

        .el-checkbox {
          position: absolute;
          right: 6px;
          top: -5px;
        }

        .user-info {
          display: flex;
          padding-top: 5px;
          justify-content: space-between;
          font-size: 13px;
          .create-time {
            margin-right: 25px;
          }
        }
      }

      .item-main {
        height: 80px;
        padding: 10px 0 0 10px;

        > div {
          line-height: 26px;
        }
      }

      .item-icon {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 30px;
        padding-right: 10px;
        cursor: pointer;

        .edit {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
